<template>
  <a-modal
    :title="title"
    :visible="visible"
    :mask-closable="false"
    :body-style="{ paddingBottom: '8px' }"
    :confirm-loading="submitLoading"
    @ok="handleSubmit"
    @cancel="handleClose"
  >
    <a-form-model ref="form" :model="formData" :rules="rules">
      <a-form-model-item prop="fileList">
        <a-upload
          accept=".xls,.xlsx"
          :file-list="formData.fileList"
          :remove="handleRemove"
          :before-upload="beforeUpload"
        >
          <a-button>
            <a-icon type="upload" />
            {{ $t('action.selectFile') }}
          </a-button>
          <a href="javascript:" style="margin-left: 12px;" @click.stop="downloadTemplate">
            {{ $t('import.downloadTemplate') }}
          </a>
        </a-upload>
      </a-form-model-item>

      <a-form-model-item :label="$t('import.whenDataExisting')" prop="existingAction">
        <a-radio-group v-model="formData.importMode">
          <a-radio value="SKIP_EXISTING">
            {{ $t('import.skipExisting') }}
          </a-radio>
          <a-radio value="OVERWRITE_EXISTING">
            {{ $t('import.overwriteExisting') }}
          </a-radio>
        </a-radio-group>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { importExcel, downloadTemplate } from '@/api/i18n/i18n-data'
import { remoteFileDownload } from '@/utils/fileUtil'

export default {
  name: 'I18nDataImportModal',
  data() {
    return {
      visible: false,
      submitLoading: false,

      value: 1,
      formData: this.defaultFormData()
    }
  },
  computed: {
    // 标题
    title() {
      return this.$t('import.batchImport') + '：' + this.$t('i18n.i18nData.text')
    },
    rules() {
      return {
        fileList: [{ type: 'array', required: true, len: 1, message: this.$t('message.pleaseSelectFile') }]
      }
    }
  },
  methods: {
    defaultFormData() {
      return {
        fileList: [],
        importMode: 'SKIP_EXISTING'
      }
    },
    show() {
      this.visible = true
      this.submitLoading = false
    },
    handleClose() {
      this.visible = false
      this.submitLoading = false
    },
    beforeUpload(file) {
      this.formData.fileList = [file]
      return false
    },
    handleRemove() {
      this.formData.fileList = []
    },
    downloadTemplate() {
      downloadTemplate().then(response => {
        remoteFileDownload(response)
      })
    },
    handleSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.submitLoading = true

          // 构造 multipartFormData
          const formData = new FormData()
          formData.append('file', this.formData.fileList[0])
          formData.append('importMode', this.formData.importMode)

          importExcel(formData)
            .then(res => {
              this.$message.success(this.$t('import.importSuccess'))
              this.$emit('reload-page-table', false)
              this.formData = this.defaultFormData()
              this.handleClose()
            })
            .finally(() => {
              this.submitLoading = false
            })
        }
      })
    }
  }
}
</script>

<style scoped></style>
